<template>
	<view style="height: 5vw;"></view>
	<view class="box">
		<view class="top">
			<view><text>充值号：{{information.Recharge_number}}</text></view>
			<view><text>套餐类型：{{information.Package_type}}</text></view>
			<view><text>套餐名：{{information.Package_name}}</text></view>
			<view><text>支付时间：{{information.time_payment}}</text></view>
			<view><text>套餐金额：￥{{information.Package_amount}}</text></view>
		</view>
		<view class="bottom">
			<text>实付：￥{{information.Actual_payment}}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const information = ref({
		Recharge_number: '12345678910',
		Package_type: '基础套餐',
		Package_name: '月享300G/买2年送1年',
		time_payment: '2023-11-24 22:10:19',
		Package_amount: '359',
		Actual_payment: '359'
	})
</script>

<style lang="scss" scoped>
	.box {
		width: 90vw;
		margin: 0 5vw;
		box-shadow: 0px 1px 5px #b4b4b4;
		border-radius: 10px;

		.top {
			width: 100%;
			padding: 10px 0;
			border-bottom: 1px solid #cbcbcb;

			view {
				padding: 5px 25px;
			}
		}

		.bottom {
			display: flex;
			justify-content: flex-end;
			font-size: 20px;
			padding: 10px 25px;
			color: red;
		}
	}
</style>